<template>
    <div>
        <PowerChart @register="registerModal"></PowerChart>
        <BasicTable @register="registerTable">
        <template #toolbar>
            <a-button type="primary" @click="handleOpenModal">查看图形分析</a-button>
            <a-button type="primary" @click="handleDayReport">查看日报表</a-button>
            <a-button @click="handleExport" :loading="exportLoading">导出</a-button>
        </template>
    </BasicTable>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'PowerList',
});
</script>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicTable, useTable, BasicColumn } from '@/components/Table';
import { downloadBlob } from '@/utils/file/download';
import { defHttp } from '@/utils/http/axios';
import PowerChart from './powerChart.vue'
import { useModal } from '@/components/Modal';
import { useGo } from '@/hooks/web/usePage';
const go = useGo();
const [registerModal, { openModal }] = useModal();

const columns: BasicColumn[] = [
    {
        title: '充电桩编号',
        dataIndex: 'pileSn',
        width: 120,
        fixed: 'left',
    },
    {
        title: '充电桩名称',
        dataIndex: 'name',
        width: 120,
        fixed: 'left',
    },
    {
        title: '累计充电次数(/次)',
        dataIndex: 'chargeTimes',
        width: 120,
        customRender({ text }) {
            return text || 0;
        },
    },
    {
        title: '累计充电量(/度)',
        dataIndex: 'powerTotal',
        width: 120,
        customRender({ text }) {
            return text || 0;
        },
    },
    {
        title: '累计订单总数',
        dataIndex: 'orderTotal',
        width: 120,
        customRender({ text }) {
            return text || 0;
        },
    },
    {
        title: '累计用户数',
        dataIndex:'memberTotal',
        width: 120,
        customRender({ text }) {
            return text || 0;
        },
    },
    {
        title: '累计充电收益(/元)',
        dataIndex: 'powerMoney',
        width: 120,
        customRender({ text }) {
            return text || 0;
        },
    },
    {
        title: '合计总收益(/元)',
        dataIndex: 'totalMoney',
        width: 120,
        customRender({ record }) {
            const { powerMoney, serviceMoney, parkMoney } = record;
            return powerMoney >= 0 ? powerMoney + serviceMoney + parkMoney : 0;
        },
    },
    {
        title: '集群合计收益排名',
        dataIndex: 'row',
        width: 120,
    }
];
const exportLoading = ref(false);
const [registerTable, { getForm }] =
    useTable({
        api: '/power/power/list',
        useSearchForm: true,
        columns,
        showIndexColumn: true,
        indexColumnProps: {
            fixed: 'left',
        },
        formConfig: {
            schemas: [
                {
                    component: 'ApiSelect',
                    label: '电站',
                    field: 'stationId',
                    componentProps: {
                        api: '/admin/main/stationList',
                        valueField: 'id',
                        labelField: 'name',
                        showSearch: true,
                        allowClear: true,
                    },
                },
                {
                    component: 'RangePicker',
                    label: '日期范围',
                    field: '[startTime, endTime]',
                    componentProps: {
                        valueFormat: 'YYYY-MM-DD 00:00:00',
                    }
                }
            ]
        },
        pagination: true,
        bordered: true,
    });
const handleExport = async() => {
    try {
        exportLoading.value = true;
        const res = await defHttp.get({ url: '/power/power/powerStatisticExcell', responseType: 'blob', params: { ...getForm().getFieldsValue() } }, { isReturnNativeResponse: true });
        downloadBlob(res);
    } catch (error) {
        console.log(error);
    } finally {
        exportLoading.value = false;
    }
}
const handleDayReport = () => {
    go('/dashboard/workbench');
}
const handleOpenModal = () => {
    openModal(true, {})
}
</script>
 